<template>
  <!-- 商品结算收费界面 -->
  <div>
    <!-- 标签页 -->
    <div style="margin: 0 auto 20px; width: fit-content">
      <!-- 付款标签页 -->
      <el-radio-group v-model="tabPosition" @change="groupChange">
        <el-radio-button v-if="oStoredCard.length != 0" label="余额收款">
          余额收款
        </el-radio-button>
        <el-radio-button label="POS机收款">POS机收款</el-radio-button>
        <el-radio-button label="扫码收款">扫码收款</el-radio-button>
        <el-radio-button label="其他">其他</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 付款方式 -->
    <div style="text-align: center">
      <div>
        <div style="font-size: 22px">应收金额：￥ {{ lumpSum }}</div>
      </div>
      <!-- 余额收款 -->
      <div
        v-if="tabPosition == '余额收款'"
        class="flex_center"
        style="margin: 20px auto"
      >
        <div>
          <!-- 选择储值卡支付 -->
          <div class="flex_y_center">
            <el-select v-model="prepaidId" clearable @change="chooseCard">
              <el-option
                v-for="(item, index) of oStoredCard"
                :key="index"
                :label="item.prepaid_name"
                :value="item.id"
              />
            </el-select>
            <div style="width: 10px"></div>
            <div v-show="prepaidId">余额：{{ cardAmount }}</div>
          </div>
          <!-- 输入付款金额 -->
          <div class="flex_y_center" style="margin-top: 15px">
            <el-input placeholder="请输入余额收款金额" />
            <div style="width: 10px"></div>
            <el-button type="primary">确认</el-button>
          </div>
        </div>
      </div>
      <!-- POS机收款 -->
      <div v-else-if="tabPosition == 'POS机收款'" style="margin: auto">
        <div class="flex_center" style="padding: 20px">
          <div v-html="srcPos"></div>
        </div>
        <el-input disabled style="width: 35%" :value="lumpSum">
          <template slot="append">元</template>
        </el-input>
      </div>
      <!-- 扫码收款 -->
      <div v-else-if="tabPosition == '扫码收款'" style="text-align: center">
        <div class="flex_center" style="padding: 50px">
          <div>
            <img
              class="img_cls"
              src="@/assets/public/scan-code.jpg"
              style="border-radius: 50%"
            />
            <div style="margin-top: 10px; color: rgba(0, 0, 0, 0.5)">
              使用扫码枪扫描客户付款码
            </div>
            <el-input
              ref="mark"
              v-model="scanCode"
              show-password
              style="width: 270px"
              true
              @blur="$refs.mark.focus()"
              @keyup.enter.native="handleClick"
            />
          </div>
        </div>
      </div>
      <!-- 其他 -->
      <div v-else-if="tabPosition == '其他'" style="text-align: center">
        <div style="padding: 20px 0 50px">
          <div class="flex_y_center">
            <div style="width: 35%; text-align: right">
              <span>*</span>
              其他收款方式：
            </div>
            <el-select v-model="scanCode">
              <el-option
                v-for="(item, index) of otherList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
          <div class="flex_y_center" style="margin-top: 10px">
            <div style="width: 35%; text-align: right">备注：</div>
            <el-input
              v-model="otherContent"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入备注"
              style="width: 40%"
              type="textarea"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="flex_between">
      <div></div>
      <div>
        <el-button type="danger" @click="$emit('close')">关闭</el-button>
        <el-button type="primary" @click="viewDocuments">查看单据</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { getOrderStatus } from '@/api/order'
  import { paymentDa, getQrCode } from '@/api/public'

  export default {
    props: {
      orderSn: {
        type: String,
        default: '',
      },
      lumpSum: {
        type: Number,
        default: 0,
      },
      oStoredCard: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        tabPosition: '余额收款',

        cardList: [], // 存放获取的储值卡列表
        prepaidId: '', // 存放选择的储值卡id
        cardAmount: '', // 当前选择储值卡余额

        srcPos: '', // 存放二维码图片路径

        scanCode: '', // 存放付款码条码
        orderClear: 0, // 保存定时器编码，用于关闭定时器

        otherList: [], // 存放其他收款项列表
        otherVal: '', // 存放其他收款方式的值
        otherContent: '', // 其他收款备注
      }
    },
    watch: {
      // 监听存放储值卡变量变化，如果改变了那么执行方法
      oStoredCard: {
        immediate: true,
        handler(newValue) {
          if (newValue.length == 0) {
            this.tabPosition = 'POS机收款'
            this.getCode()
          } else {
            this.tabPosition = '余额收款'
          }
        },
      },
    },
    // 当页面关闭前，执行关闭定时器
    beforeDestroy() {
      clearInterval(this.orderClear)
    },
    methods: {
      // 选择储值卡，拿出当前选择储值卡的余额
      chooseCard() {
        for (let item of this.oStoredCard) {
          if (item.id == this.prepaidId) {
            this.cardAmount = item.min_amount || 0
          }
        }
      },
      // 根据用户选择的不同付款方式，执行聚焦，获取二维码图片操作
      groupChange(e) {
        if (e == '扫码收款') {
          this.$refs['mark'].focus()
        } else if (e == 'POS机收款') {
          if (this.srcPos == '') {
            this.getCode()
          }
        } else if (e == '其他') {
          if (this.otherList.length != 0) {
            this.getOtherList()
          }
        }
      },
      // 扫码支付
      handleClick() {
        const data = {
          mode: 'pay_scan',
          authcode: this.scanCode, // 付款码
          order_sn: this.orderSn, // 订单号
        }
        paymentDa(data).then(() => {
          this.scanCode = '' // 清空条码变量
        })
        this.queryStatus()
      },
      // 获取pos机付款二维码
      getCode() {
        const params = {
          order_sn: this.orderSn,
        }
        // 获取二维码图片路径
        getQrCode(params).then((res) => {
          this.srcPos = res
          this.queryStatus()
        })
      },
      // 获取其他收款列表
      getOtherList() {},
      // 查询当前订单状态
      queryStatus() {
        // 开启定时器
        this.orderClear = setInterval(() => {
          const params = {
            order_sn: this.orderSn,
          }
          getOrderStatus(params)
            .then((res) => {
              this.$message.success(res.message)
              clearInterval(this.orderClear)
              this.$emit('send')
            })
            .catch((err) => {
              switch (err.code) {
                case '4001':
                  break
                case '4002':
                  this.$message.error(err.message)
                  clearInterval(this.orderClear)
                  break
                case '4003':
                  this.$message.error(err.message)
                  clearInterval(this.orderClear)
                  break
              }
            })
        }, 3000)
      },
      // 关闭定时器，关闭对话框，跳转到单据界面
      viewDocuments() {
        clearInterval(this.orderClear)
        this.$emit('close')
        this.$router.push('/order/orderList')
      },
    },
  }
</script>

<style scoped>
  .img_cls {
    width: 150px;
    height: 150px;
  }
  .flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  span {
    color: red;
  }
</style>
